<template>
  <div class="goods-detail-container">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }" style="cursor: pointer" >首页</el-breadcrumb-item>
      <el-breadcrumb-item v-if="showBackToList" @click.native="$router.back()" style="cursor: pointer" >列表页</el-breadcrumb-item>
      <el-breadcrumb-item>商品详情</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 商品详情内容 -->
    <div class="product-detail">
      <div class="product-image">
        <img :src="goodsDetail.image" :alt="goodsDetail.name" class="main-image">
      </div>
      <div class="product-info">
        <h2 style="text-align: left; font-size: 20px" class="product-name">{{ goodsDetail.info }}</h2>
        <div class="product-price">
          <span class="price-label">价格：</span>
          <span class="price-value">¥{{ goodsDetail.price }}</span>
        </div>
        <div class="delivery-address">
          <span style="font-weight: bold">配送至：</span> 广东省广州市增城区
        </div>
        <div class="color-selection">
          <span class="selection-label">选择颜色：</span>
          <el-button v-for="(color, index) in goodsDetail.colors" :key="index" size="mini"
                     :type="goodsDetail.selectedColor === color ? 'primary' : ''" @click="selectColor(color)">
            {{ color }}
          </el-button>
        </div>
        <div class="version-selection">
          <span class="selection-label">选择版本：</span>
          <el-button v-for="(version, index) in goodsDetail.versions" :key="index" size="mini"
                     :type="goodsDetail.selectedVersion === version ? 'primary' : ''" @click="selectVersion(version)">
            {{ version }}
          </el-button>
        </div>
        <div class="quantity-selection">
          <span class="selection-label">购买数量：</span>
          <el-input-number v-model="goodsDetail.quantity" :min="1" :max="10" size="mini"></el-input-number>
        </div>
        <div class="action-buttons">
          <el-button style="margin-left: 100px" type="success" @click="addToCart">加入购物车</el-button>
          <el-button type="danger" @click="buyNow">立即购买</el-button>
        </div>
      </div>
    </div>

    <!-- 商品图片 -->
    <div class="product-images">
      <img v-for="(image, index) in goodsDetail.images" :key="index" :src="image" :alt="goodsDetail.name"
           class="small-image">
    </div>
  </div>
</template>

<script>
import api from "@/api";

export default {
  name: "GoodsDetail",
  data() {
    return {
      showBackToList: false,
      goodsDetail: {}
    };
  },

  //  钩子函数
  created() {
    // 从路由参数中获取商品名称并请求商品详情
    const {name} = this.$route.query;
    if (name) {
      this.getGoodsDetailByName(name);
    }
  },
  //  判断从首页过来的页面就不要上显示列表页了
  beforeRouteEnter(to, from, next) {
    next(vm => {
      // 判断是否来自首页，根据路径判断
      vm.showBackToList = from.path !== '/';
    })
  },
  methods: {


    selectColor(color) {
      this.goodsDetail.selectedColor = color;
    },
    selectVersion(version) {
      this.goodsDetail.selectedVersion = version;
    },
    addToCart() {
      // 加入购物车逻辑
      console.log("加入购物车");
    },
    buyNow() {
      // 立即购买逻辑
      console.log("立即购买");
    },

    getGoodsDetailByName(goodName) {

      // 模拟从服务器获取商品详情
      api.get("/api/getGoodsDetail", {params: {goodsName: goodName}}).then(
          res => {
            this.goodsDetail = res.serverData;
            console.log("获取商品详情:", this.goodsDetail);
          }
      );
    }
  }
};
</script>

<style scoped>
.goods-detail-container {
  width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.product-detail {
  display: flex;
  margin-top: 20px;
}

.product-image {
  width: 50%;
  border: 1px solid #ccc;
  padding: 10px;
}

.main-image {
  width: 100%;
  height: auto;
}

.product-info {
  width: 50%;
  padding: 10px;
}

.product-name {
  font-size: 24px;
  margin-bottom: 10px;
}

.product-price {
  display: flex;
  align-items: center;
  height: 30px;
  margin-bottom: 20px; /* 增加间距 */
  background-color: rgb(238, 238, 238);
}

.price-label {
  font-weight: bold;
}

.price-value {
  color: red;
  font-weight: bold;
  font-size: 20px;
  margin-left: 5px;
}

.delivery-address {
  margin-bottom: 20px; /* 增加间距 */
  text-align: left;
  color: black;
}

.color-selection, .version-selection {
  display: flex;
  align-items: center;
  margin-bottom: 20px; /* 增加间距 */
}

.selection-label {
  font-weight: bold;
  margin-right: 5px;
}

.quantity-selection {
  display: flex;
  align-items: center;
  margin-bottom: 30px; /* 增加间距 */
}

.action-buttons {
  display: flex;
  margin-top: 50px;
  margin-bottom: 20px; /* 增加间距 */
}

.product-images {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  width: 601px; /* 确保总宽度与父容器一致 */
}

.small-image {
  width: calc(16.6667% - 10px); /* 每张图片占总宽度的1/6，减去边框和间距 */
  border: 1px solid #ccc;
  padding: 2px;
  box-sizing: border-box; /* 确保边框和内边距包含在宽度内 */
}
</style>